<template>
<div class="rank fr">
  <div class="ranking fl">
    <div class="rank-head clearFixed">
      <p class="con-title fl"><i class="el-icon-s-data"></i> 积分排名</p>
      <span>KPL</span>
    </div>
    <ul class="tab-tilte">
      <li @click="cur=0" :class="{active:cur==0}">东部</li>
      <li @click="cur=1" :class="{active:cur==1}">西部</li>
    </ul>
    <div class="tab_con">
      <div class="tab-content">
        <div class="ranking-detail" v-show="cur==0">
          <table class="ranking-table1">
            <tr>
              <th>排名</th>
              <th>战队</th>
              <th>胜</th>
              <th>负</th>
              <th>积分</th>
              <th>净胜分</th>
            </tr>
            <tr v-for="(item,index) in tableData.A" :key="item.teamid">
              <td>{{index+1}}</td>
              <td class="rank-team">
                <i :style="`background-image:url(${item.logo})`"></i>{{item.name}}
              </td>
              <td>{{item.win}}</td>
              <td>{{item.lose}}</td>
              <td>{{item.process}}</td>
              <td>{{item.net_points}}</td>
            </tr>
          </table>
        </div>
        <div class="ranking-detail" v-show="cur==1">
          <table class="ranking-table1">
            <tr>
              <th>排名</th>
              <th>战队</th>
              <th>胜</th>
              <th>负</th>
              <th>积分</th>
              <th>净胜分</th>
            </tr>
            <tr v-for="(item,index) in tableData.B" :key="item.teamid">
              <td>{{index+1}}</td>
              <td class="rank-team">
                <i :style="`backgroundImage:url(${item.logo})`"></i>
                {{item.name}}
              </td>
              <td>{{item.win}}</td>
              <td>{{item.lose}}</td>
              <td>{{item.process}}</td>
              <td>{{item.net_points}}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  data: () => ({
    tableData: [],
    cur: 0
  }),
  created () {
    this.getscore()
  },
  methods: {
    async getscore () {
      const { data } = await this.$axios.get('/match/scoredata')
      this.tableData = data.data
      console.log(this.tableData)
      // console.log(this.teaminfo)
    }
  }
}
</script>
<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
.fl{
  float:left;
}
.fr{
  float:right;
}
.clearFixed:after{
  content:"";
  display:block;
  clear:both;
}
li{
  list-style: none;
}
.rank{
  height: 500px;
  .ranking{
      width: 360px;
      .rank-head{
        font-size: 20px;
        line-height: 40px;
        border-bottom: 2px solid #ddd;
        margin-bottom: 10px;
        position: relative;
        .con-title{
          font-size: 22px;
          //  border-bottom: 2px solid #ddd;
           padding-right: 20px;
        }
        span{
          position: absolute;
          border-bottom: 2px solid gold;
          box-sizing: border-box;
          font-size: 14px;
          color: gold;
        }
      }
      .tab-tilte{
        display: flex;
        padding-left: 0;
        li{
          width: 50%;
          height: 36px;
          background-color: #ddd;
          text-align: center;
          line-height: 36px;
        }
        .active{
          color: #fff;
          background-color: #f3c258;
        }
      }
      .tab_con{
        .tab-content{
          .ranking-detail {
            height: 405px;
            font-size: 16px;
            overflow: auto;
            table {
              border-collapse: collapse;
              border-spacing: 0 10px;
              color: #363636;
            }
            tr {
              display: block;
              margin-top: 7px;
              border-spacing: 10px;
            }
            th {
              width: 60px;
              background: #f7f7f7;
              line-height: 40px;
              color: #363636;
              font-weight: 400;
            }
            th:nth-child(2) {
                width: 120px;
            }
            td {
              width: 60px;
              text-align: center;
              line-height: 41px;
            }
            .rank-team {
              position: relative;
              font-size: 16px;
              width: 120px;
               i {
                float: left;
                height: 28px;
                width: 28px;
                margin: 7px 0 0;
                background-position: 50%;
                background-size: 100% 100%;
              }
            }
          }
        }
      }
      .tab-content{
        .ranking-detail {
          height: 405px;
          font-size: 16px;
          overflow: auto;
          table {
            border-collapse: collapse;
            border-spacing: 0 10px;
            color: #363636;
          }
          tr {
            display: block;
            margin-top: 7px;
            border-spacing: 10px;
          }
          th {
            width: 60px;
            background: #f7f7f7;
            line-height: 40px;
            color: #363636;
            font-weight: 400;
          }
        }
      }
    }
}
</style>
